<template>
  <main class="md:w-2/5 w-full mx-auto bg-white position md:mt-30 mt-10 p-7 rounded-lg shadow-md">
    <div class="text-center font-bold text-2xl">找回密码</div>
    <div class="text-center text-gray-400 text-lg mt-1.5">设置新密码后，原密码将失效请知悉</div>
    <el-form ref="form" :model="form" label-width="80px" v-if="page == 1">
      <el-form-item label-width="80" label="账号" class="mt-3">
        <el-input placeholder="请输入账号" size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-input v-model="model" placeholder="请填写手机号码" size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="default" size="large" class="w-full">点击按钮验证</el-button>
      </el-form-item>
      <el-form-item label-width="0" class="flex">
        <el-input placeholder="请输入短信验证码" size="large" v-model="phoneForm.captcha">
          <template #append>
            <el-button>获取验证码</el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label-width="0" class="mt-8">
        <el-button type="primary" size="large" class="w-full mx-auto" @click="page = 2">下一步</el-button>
      </el-form-item>
    </el-form>
    <el-form ref="form" :model="form" label-width="80px" v-if="page == 2">
      <el-form-item label-width="80" label="新密码" class="mt-3">
        <el-input placeholder="请输入新密码" size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="80" label="确认密码">
        <el-input placeholder="请输入新密码" size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="0" class="mt-8">
        <el-button type="primary" size="large" class="w-1/3 mx-auto" @click="page = 1">返回上一步</el-button>
        <el-button type="primary" size="large" class="w-1/3 mx-auto">确认</el-button>
      </el-form-item>
    </el-form>
    <div class="flex justify-around">
      <div>
        <span class="cursor-pointer text-primary" @click="$router.push('/passport/login')">去登录</span>
      </div>
    </div>
  </main>

</template>

<script setup>
import { reactive, ref } from 'vue';

let activeName = ref('phone')
let page = ref(1)
let phoneForm = reactive({
  phoneNum: '',
  captcha: ''
})
</script>